<template>
  <div class="city-item">
    <span class="city" @click="onCityClick(cityInfo)">
      {{cityInfo.cityName}}
    </span>
  </div>
</template>

<script>
import {mapMutations} from 'vuex'
  export default {
    name: 'CityListSub',
    props: {
      cityInfo: Object
    },
    methods: {
      ...mapMutations(['selectCity']),
      onCityClick (cityInfo) {
        // 更改城市缓存
        this.selectCity(cityInfo)
        // 跳转首页
        this.$router.push('/')
      }
    }
  }
</script>

<style lang="scss" scoped>
@import '~styles/mixins.scss';
@import '~styles/variables.scss';

.city-item {
	@include flex-row;
	align-items: center;
	height: .5rem;
	padding-left: .15rem;
	background-color: #fff;
	border-bottom: 1px solid #ddd;
	font-size: .16rem;
}
</style>
